let inps = document.querySelectorAll('input')
console.log(inps);
let btns = document.querySelectorAll('button')
console.log(btns);
let add = document.querySelector('.xinzeng')
let list = document.querySelector('tbody')
let next = document.querySelector('.next')
console.log(next);
let prev = document.querySelector('.prev')
let page1 = document.querySelector('.page1')
// 渲染数据
function render(data) {
    var str = ''
    str = data.map((item) => {
        return `
            <tr>
                <td>${item.bianhao}</td>
                <td>${item.num}</td>
                <td>${item.name}</td>
                <td>${item.paixu}</td>
                <td>${item.zhuangtai}</td>
                <td>${item.time}</td>
                <td><span>修改</span>&emsp;&emsp;<span class="a1">删除</span></td>
            </tr>`
    }).join('')
    // console.log(str);
    list.innerHTML = str
    page1.innerHTML = page
}


// 添加数据
btns[2].onclick = () => {
    add.style.display = 'block'
    btns[8].onclick = () => {
        axios.post('/api/add', { name: inps[1].value, num: inps[2].value }).then((res) => {
            alert(res.data.msg)
            render(res.data.list)
        })
        console.log("点击");
        add.style.display = 'none'

    }
    btns[9].onclick = () => {
        add.style.display = 'none'
    }

}
var page = 1
// 
function fasong() {
    console.log(page);
    // console.log(data);
    axios.get('/api/list', { params: { page: page, count: 5 } }).then((res) => {
        // console.log(res.data.list);
        render(res.data.list)
    })
}

// 点击下一页
next.onclick = function () {
    page++
    if (page >= 2) {
        page = 2
    }
    fasong()
}
prev.onclick = function () {
    page--
    if (page <= 1) {
        page = 1
    }
    fasong()
}

fasong()

// 删除
list.onclick = function (e) {
    // console.log(e.target.className);
    if (e.target.className == 'a1') {
        console.log(11);
        axios.post('/api/delete', { bianhao: e.target.dataset.bianhao }).then((res) => {
            console.log(res.data.list);
            render(res.data.list)
        })
    }
}
// 查询
btns[0].onclick = function () {
    console.log(11);
        axios.get('/api/search', { params: { searchKey: inps[0].value } }).then((res) => {
            console.log(res.data.list);
            render(res.data.list)
        })
}